<template>
<div class="body">
  <section class="movie singleton page active" :style="'height:'+heighta+'px'+';'">
    <div class="page-wrap cinema active fix-nav">
      <div class="tab-block">
        <div class="tab-content">
          <div class="page cinema">
            <navbar></navbar>
            <div class="blacker"></div>
            <div class="cinema-list" style="margin-bottom: 55px; margin-top: 40px;">
              <div class="list-wrap" style="margin-top: 0px;">
                <ul class="cinema-list-content">
                  <li v-for="(cities,index) in this.cinemalist" :key="index" class="cinema-list-item">
                    <a href="javascript:void(0)" class="cinema-item-wrap">
                      <div class="cinema-info-lf cinema-info">
                        <span class="cinema-name">{{cities.name}}</span>
                        <img style="display: none;" class="isVisted" src="" alt="">
                        <span class="cinema-address">{{cities.address}}</span>
                      </div>
                      <div class="cinema-info-rt cinema-info">
                        <div class="">
                          <span class="cinema-lowPrice price-fmt">
                            <i>￥</i>
                            <span class="interge" style="font-size: 15px;">{{(cities.lowPrice/100)}}分</span>
                            <span class="" style='display: none;'></span>
                            <span class="decimal" style="font-size: 15px;"></span>
                            <span class="" style='display: none;'></span>
                            <span class="decimal" style="font-size: 15px; display: none;">00</span>
                          </span>
                          <span class="upon">起</span>
                        </div>
                        <div class="cinema-gpsAddress">
                          <img style="display: none;" src="" alt="">
                          <strong>{{cities.Distance | Distancefilter}}km</strong>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- <buttombar></buttombar> -->
</div>
</template>
<style scoped>
.singleton, .page.singleton-notab {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
.page.singleton {
    -webkit-transform: none!important;
    transform: none!important;
}
.page.active {
    display: block;
}
.page {
    position: absolute;
    width: 100%;
    display: none;
}
.page.singleton-notab .page-wrap, .page.singleton .page-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.page-wrap {
    /* display: none; */
    background-color: #fff;
}
.cinema-list .list-wrap {
    background-color: #fff;
}
.page-wrap .page {
    display: block;
}
.cinema.fix-nav .nav-wrap {
    position: fixed;
}
.cinema-list-content {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cinema-list-content .cinema-list-item {
    background-color: #fff;
    padding: 40px 15px;
}
.cinema-list-content .cinema-list-item:first-child{
    padding-top: 15px;
}
.cinema-list-item:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
.cinema-info-lf {
    width: calc(89% - 65px);
    text-align: left;
    padding-right: 15px;
    float: left;
}
.cinema-info-rt {
    width: 70px;
    text-align: center;
    float: right;
    margin-right: -25px;
}
div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.cinema-name {
    color: #191a1b;
    font-size: 15px;
    float: left;
}
.cinema-info-lf span {
    display: block;
    max-width: 80%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}
.cinema-info-lf .isVisted {
    width: 32px;
    height: 16.5px;
    margin-bottom: -6px;
    margin-left: 4px;
}
.cinema-info-lf .cinema-address {
    color: #797d82;
    font-size: 12px;
    margin-top: 5px;
}
.price-fmt, .price-fmt span {
    float: none!important;
}
.price-fmt {
    font-size: 15px;
    color: #ff5f16;
    height: 0!important;
    display: inline-table!important;
}
.price-fmt i {
    font-size: 11px;
    font-style: normal;
}
.cinema-info-rt .upon {
    color: #ff5f16;
    font-size: 10px;
}
.cinema-info-rt .cinema-gpsAddress {
    display: block;
    font-size: 11px;
    color: #797d82;
    margin-top: 5px;
}
.cinema-info-rt .cinema-gpsAddress img {
    display: block;
    width: 13px;
    height: 17.5px;
    margin: 0 auto;
    margin-top: -30px;
}
.cinema-info-rt .cinema-gpsAddress {
    display: block;
    font-size: 11px;
    color: #797d82;
    margin-top: 5px;
}
.cinema-info-rt .cinema-gpsAddress strong {
    font-weight: 400;
    display: block;
    margin-top: 5px;
}
</style>
<script>
// import http from '@/Util/http'
import Vue from 'vue'
import Navbar from '../components/Navbar.vue'
import { mapActions, mapState } from 'vuex'
Vue.filter('Distancefilter', (Distance) => {
  return ((Distance) * 10000 + '').slice(0, 4)
})
export default {
  components: {
    Navbar
  },
  data () {
    return {
      lists: [],
      heighta:'',
    }
  },
  computed:{
    ...mapState('Cinemalist',['cinemalist']),
    ...mapState('City',['Cityid'])
  },
  methods:{
    ...mapActions('Cinemalist',['getcinemalist'])
  },
  mounted () {
    this.heighta = (document.documentElement.clientHeight)-97
    console.log(this.heighta)
    if (this.cinemalist.length === 0) {
      this.getcinemalist(this.Cityid)
    } else {
      console.log(1111111)
    }
    // this.$nextTick(() => {
    //   new BetterScroll('.list', {
    //     scrollY: true,
    //     click: true
    //   })
    // })
  }
}
</script>
